<template>
  <div class="compare-drawer px-10 py-5 w-full bg-gray-50" ref="DrawerRef" v-if="show">
    <div class="flex justify-between items-center">
      <span class="font-bold text-sm">对比栏</span>
      <el-button type="text" @click="doHide">隐藏</el-button>
    </div>
    <div class="flex items-center">
      <div class="h-full flex-grow" v-for="fund in data" :key="fund.code">
        <el-button type="text">{{ fund.name }}</el-button>
        <p class="text-sm text-gray-400">
          近1月：<rate-text :value="fund.m1" />
        </p>
        <p class="text-sm text-gray-400">
          近3月：<rate-text :value="fund.m3" />
        </p>
        <p class="text-sm text-gray-400">
          近1年：<rate-text :value="fund.y1" />
        </p>
      </div>
      <div class="h-full flex-grow text-center text-xs text-gray-400" v-for="n in 5 - data.length" :key="n">
        您还可以继续添加<br />请在列表中选择基金
      </div>
      <div class="flex items-center">
        <el-button type="primary" size="mini" @click="doCompare" :disabled="data.length === 0">比较</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ref, watch, onMounted } from "vue";
import { FilterFundRes } from "/@/api/fund/index";
const emit = defineEmits<{
  (event: "hide"): void;
}>();
const props = defineProps<{
  show: boolean;
  data: FilterFundRes[];
}>();

const router = useRouter();
const DrawerRef = ref(null);

const doHide = () => {
  emit("hide");
};
const doCompare = () => {
  const codes = props.data.map((v) => {
    return v.code;
  });
  router.push({ path: "/Fund/Compare", query: { codes: codes.join(",") } });
};
</script>

<style lang="postcss" scoped>
.compare-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
}
</style>